<template>
  <el-header id="header">
    <span class="hideAside" @click="collapse"><i class="fa fa-indent fa-lg"></i>切换</span>

    <ul class="personal">
      <li>
        <img src="http://121.36.172.205//userImg/yhtx08.png" alt="">
      </li>
      <li>
        <el-dropdown @command="handleCommand">
                  <span class="el-dropdown-linkdd">
                    {{$store.state.userInfo.name}}
                    <el-icon class="el-icon--right">
                      <arrow-down/>
                    </el-icon>
                  </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info">基本信息</el-dropdown-item>
              <el-dropdown-item command="editPassword">修改密码</el-dropdown-item>
              <el-dropdown-item command="xx">我的工作台</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>

    </ul>
  </el-header>
</template>

<script setup>
import { useRouter,useRoute } from "vue-router";
import {useStore} from "vuex"
import { onBeforeUnmount } from 'vue';

import {ArrowDown} from '@element-plus/icons-vue'

const router = useRouter();
const route = useRoute();
const store= useStore();

//websocket对象
let websocket = null;


const collapse=()=>{
  store.commit("toggleCollapse");
}

const handleCommand=(command)=>{
  if ("logout" == command) {
    sessionStorage.removeItem("token");
    sessionStorage.removeItem("userInfo")

    store.commit("logout"); //vuex
    //跳转到登录界面
    router.push("/login");
  } else if ("editPassword" == command) {
    //TODO
  }
}

if('WebSocket' in window){
  let clientId = 110;
  websocket = new WebSocket("ws://localhost/ws/"+clientId);

   // 监听socket打开
  websocket.onopen = function () {
    console.log('浏览器WebSocket已打开')
  }
// 监听socket消息接收
  websocket.onmessage = function (msg) {
    console.log(msg);
    // 转换为json对象
    /*
    that.$refs.audioVo.currentTime = 0
    that.$refs.audioVo2.currentTime = 0

    const jsonMsg = JSON.parse(msg.data)
    if (jsonMsg.type === 1) {
      that.$refs.audioVo.play()
    } else if (jsonMsg.type === 2) {
      that.$refs.audioVo2.play()
    }
    */
  }
// 监听socket错误
  websocket.onerror = function () {

  }
  // 监听socket关闭
  websocket.onclose = function () {
    console.log('WebSocket已关闭')
  }
}
else{
  alert('Not support websocket')
}

onBeforeUnmount(()=>{
  websocket.close();
})


</script>

<style scoped>
#header .personal .el-dropdown-link, #header .hideAside {
  cursor: pointer;
}

#header {
  max-height: 50px;
  line-height: 50px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
}

#header .personal {
  display: flex;
  flex-direction: row;
  align-content: center;
}

#header .personal li {
  margin-left: 13px;
  margin-right: 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
}


#header .personal li img{
  width: 40px;
  border-radius: 50%;
}


</style>
